<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业123</title>
    <style>
        body,div,img,span{
            margin:0;
            padding:0;
        }
        #box{
            position:relative;
            width:500px;
            height:343px;
            margin:100px auto;
            border:1px solid red;
        }
        /*text2{*/
            /*dispaly:none;*/
        /*}*/
        #box .text1{
            display:block;
            position:absolute;
            bottom:0px;
            left:0px;
            width:100%;
            font-size:35px;
            color: rgb(37, 12, 5);
            text-align:center;
            line-height:50px;
            background-color: rgba(237, 105, 50, 0.44);
        }
    </style>
</head>
<body>
<div id="box" class="box1">
    <img src="mla.jpg" alt="这是一张图片">
    <span id="text"class="text1" styele="display:none">小矮人啊小矮人</br>小怪兽啊小怪兽</span>
</div>
</body>
<script type="text/javascript">
    var oBox = document.getElementById("box");
         oText = document.getElementById("text");
    oBox.onmouseleave = function(){
        oText.className = "text2";
        oText.style.display = "none";
    }
    oBox.onmouseenter = function(){
        oText.className = "text1";
         oText.style.display = "block";
    }
    //  问题：1.新增class用不好，用  oBox.onmouseleave = function(){
    //     oText.className = "text2";
    //}时文字没有完全none掉，在图片区消失在却在盒子下方显示出来。
</script>
</html>